<template>
	<view class="content">
		<view class="list">
			<view class="item" @tap="changeAvatar">
				<view class="name">头像</view>
				<view class="val">
					<image :src="userinfo.avatar" mode="aspectFill" class="img"></image>
					<uni-icons type="forward" size="20" color="#999"></uni-icons>
				</view>
			</view>
			<view class="item">
				<view class="name">昵称</view>
				<view class="val" @tap="open">
					<text>{{userinfo.nickname}}</text>
					<uni-icons type="forward" size="20" color="#999"></uni-icons>
				</view>

			</view>
			<view class="item">
				<view class="name">电话</view>
				<view class="val" @tap="changetel = true">
					<text>{{userinfo.mobile}}</text>
					<uni-icons type="forward" size="20" color="#999"></uni-icons>
				</view>
			</view>
		</view>

		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="修改昵称" value="" placeholder="请输入"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>

		<view class="bg" v-if="changetel">
			<view class="mid">
				<view class="uni-dialog-title">修改绑定号码</view>
				<view class="uni-dialog-content">
					<input class="uni-dialog-input" v-model="telInfo.new" type="number" placeholder="请输入新的电话号码">
					<view class="code-view">
						<input class="uni-dialog-input code-input" v-model="telInfo.code" type="number"
							placeholder="请输入验证码">
						<button size="default" class="code-btn">获取验证码</button>
					</view>
				</view>
				<view class="uni-dialog-button-group">
					<view class="uni-dialog-button" @click="changetel = false">
						<text class="uni-dialog-button-text">取消</text>
					</view>
					<view class="uni-dialog-button uni-border-left" @click="onOk">
						<text class="uni-dialog-button-text uni-button-color">确认</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import uploadUrl from '../../network/utils.js';
	import {
		getUserInfo,
		setUserInfo,
		sendCode,
		changeMobile
	} from '../../network/main.js';
	import {
		onShow
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive
	} from 'vue';
	const popup = ref(null)
	const popuoType = ref(1)
	const telInfo = reactive({
		new: '',
		code: ''
	})
	onShow(() => {
		getInfo()
	})
	const userinfo = reactive({})
	const getInfo = () => {
		getUserInfo({}).then(res => {
			if (res.data.data) {
				Object.assign(userinfo, res.data.data)
			}
		})
	}
	const changetel = ref(false)
	const changeAvatar = () => {
		uni.chooseImage({
			count: 1,
			success(res) {
				uni.uploadFile({
					url: uploadUrl.uploadUrl,
					filePath: res.tempFiles[0].path,
					name: 'file',
					header: {
						'token': uni.getStorageSync('token')
					},
					formData: {
						file: res.tempFiles[0].path
					},
					success(response) {
						let res = JSON.parse(response.data)
						userinfo.avatar = res.data.fullurl
						setInfo()
					}
				})
			}
		})
	}
	const open = () => {
		popup.value.open()
	}
	const dialogInputConfirm = (e) => {
		userinfo.nickname = e
		setInfo()
	}
	const onOk = () => {
		userinfo.mobile = telInfo.new
		changetel.value = false
		let data = {
			mobile: telInfo.new,
			captcha: telInfo.code
		}
		changeMobile(data).then(res => {
			uni.showToast({
				title: '修改成功'
			})
			getInfo()
		})
	}
	const setInfo = () => {
		setUserInfo(userinfo).then(res => {
			uni.showToast({
				title: '修改成功'
			})
			getInfo()
		})
	}
	const timer1 = ref(null)
	const timer2 = ref(null)
	const countdown = ref('')
	const sendcode = () => {
		let data = {
			mobile: userinfo.mobile,
			event: 'changemobile'
		}
		sendCode(data).then(res => {
			countdown.value = 60;
			timer1.value = setInterval(() => {
				countdown.value -= 1;
			}, 1000)
			timer2.value = setTimeout(() => {
				clearInterval(timer1.value);
				countdown.value = null;
			}, 60000)
			uni.showToast({
				title: '发送成功',
				icon: 'none'
			})
		})
	}
</script>

<style lang="scss">
	.content {
		border-top: 2rpx solid #f7f7f7;

		.list {
			width: 100%;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			background-color: #fff;
			margin-top: 2rpx;

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 0;
				box-sizing: border-box;
				border-bottom: 2rpx solid #f7f7f7;

				.val {
					font-size: 28rpx;
					color: #333;
					display: flex;
					align-items: center;
					gap: 30rpx;
				}

				.img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 10rpx;
				}
			}
		}

		.bg {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			background-color: rgba(0, 0, 0, .2);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.mid {
				width: 300px;
				background-color: #fff;
				border-radius: 11px;

				.uni-dialog-title {
					padding-top: 25px;
					font-size: 16px;
					font-weight: 500;
					text-align: center;
					color: #909399;
				}

				.uni-dialog-content {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					gap: 10px;
					padding: 10px 0;
				}

				.uni-dialog-input {
					width: 260px;
					font-size: 14px;
					border: 1px #eee solid;
					height: 40px;
					padding: 0 10px;
					border-radius: 5px;
					color: #555;
				}

				.code-view {
					display: flex;
					justify-content: space-between;
					gap: 22px;

					.code-input {
						display: inline-block;
						width: 140px;
					}

					.code-btn {
						line-height: 40px;
						font-size: 14px;
						display: inline-block;
					}
				}

				.uni-dialog-button-group {
					/* #ifndef APP-NVUE */
					display: flex;
					/* #endif */
					flex-direction: row;
					border-top-color: #f5f5f5;
					border-top-style: solid;
					border-top-width: 1px;
				}

				.uni-dialog-button {
					/* #ifndef APP-NVUE */
					display: flex;
					/* #endif */

					flex: 1;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					height: 45px;
				}

				.uni-border-left {
					border-left-color: #f0f0f0;
					border-left-style: solid;
					border-left-width: 1px;
				}

				.uni-dialog-button-text {
					font-size: 16px;
					color: #333;
				}

				.uni-button-color {
					color: #007aff;
				}
			}
		}
	}
</style>